<template>
  <div class="container">
    <el-card>
      <div slot="header">
        <span style="font-weight: 700; font-size: 22px">发表文章</span>
        <i
          class="el-icon-close"
          style="float: right; padding: 3px 0; font-size: 20px"
          type="text"
          @click="close"
        ></i>
      </div>
      <el-form ref="form" :model="form">
        <el-form-item label="文章标题" label-width="60px" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章分类" label-width="60px" prop="category">
          <el-select
            v-model="form.cate_id"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" label-width="60px" prop="content">
          <!-- 注意： 这个quill-editor不是element的表单元素，不受element控制，blur无效 -->
          <!-- 需要手动注册blur事件 -->
          <quillEditor v-model="form.content"></quillEditor>
        </el-form-item>
        <el-form-item label="文章封面">
          <!-- 放置上传图片 -->
          <ImageUpload ref="staffPhoto" />
        </el-form-item>
        <el-form-item label-width="60px">
          <el-button type="primary" size="small" @click="btnOK">{{
            btnValue
          }}</el-button>
          <el-button v-show="!$route.query.id" type="info" plain @click="saveArticle">存为草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
// 富文本编辑器组件
import { quillEditor } from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { addArticle, getArticleCategory, getArticleInfo, updateArticle } from '@/api/article'
export default {
  data () {
    return {
      category: [],
      form: {
        title: '',
        cate_id: '',
        content: '',
        state: '已发布'
      },
      file: {},
      value: '',
      btnValue: '发布'
    }
  },
  components: {
    quillEditor,
    ImageUpload
  },
  created () {
    if (this.$route.query.id) {
      this.btnValue = '修改文章'
      this.getArticleInfo()
    }
    this.getArticleCategory()
  },
  methods: {
    async btnOK () {
      this.addArticle()
      if (this.$route.query.id) {
        this.$message.success('文章修改成功')
        this.$router.push('article-list')
        return
      }
      this.$message.success('文章发布成功')
      this.$router.push('article-list')
    },
    saveArticle () {
      this.form.state = '草稿'
      this.addArticle()
      this.$message.success('文章已存为草稿')
      this.$router.push('article-list')
    },
    async addArticle () {
      // 获取文章封面
      this.file = this.$refs.staffPhoto.file

      const result = { ...this.form, cover_img: this.file }
      if (this.$route.query.id) {
        await updateArticle(result)
      }
      await addArticle(result)
    },
    async close () {
      await this.$confirm('此操作将导致文章信息丢失,是否继续？')
      this.form = {
        title: '',
        cate_id: '',
        content: '',
        state: '已发布'
      }
      this.file = {}
    },
    async getArticleCategory () {
      const res = await getArticleCategory()
      this.category = res.data
    },
    async getArticleInfo () {
      const res = await getArticleInfo(this.$route.query.id)
      this.form = res.data
      console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
.quill-editor {
  ::v-deep .ql-editor {
    height: 150px;
  }
}
.el-icon-close {
  cursor: pointer;
}
</style>
